<template>
  <d2-container>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="品种头寸明细" name="first">
         <el-card shadow="never" class="d2-mb">
        <el-form
          ref="first_form"
          :inline="true"
          :model="first_form"
          label-width="80px"
        >
         <el-row :gutter="20">
          <el-col :span="6">
          <el-form-item label="类别:">
            <el-select
              v-model="first_form.trade_type"
              placeholder="请选择"
              @change="changedatas()"
            >
              <el-option label="现货" value="现货"></el-option>
              <el-option label="期货" value="期货"></el-option>
              <el-option label="期权" value="期权"></el-option>
            </el-select>
          </el-form-item>
           </el-col>
          <el-col :span="6">
          <el-form-item :label="names">
            <el-select v-model="first_form.name" placeholder="请选择">
              <el-option
                v-for="item in options_pm"
                :key="item.productName"
                :value="item.productName"
              >
              </el-option>
            </el-select>
          </el-form-item>
           </el-col>
          <el-col :span="6">
          <el-form-item label="方向:">
            <el-select v-model="first_form.direction" placeholder="请选择">
              <el-option
                v-for="item in options_fx"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
           </el-col>
             <el-col :span="2" style='margin-top:3px;'>
           <el-button size="small" @click="select_tableData_fn()">查询</el-button>
           </el-col>
          <el-col :span="20">
          <el-form-item label="日期:">
           <el-date-picker
              type="date"
              v-model="first_form.start_date"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            -
            <el-date-picker
              type="date"
              v-model="first_form.end_date"
              placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
           </el-col>
            </el-row>
        </el-form>
         </el-card>
          <div class="mb">
        <div style="padding-left:80px">
         
          <el-button size="small">导出</el-button>
          <el-button size="small">打印</el-button>
        </div>
        </div>
         <el-card shadow="never" class="d2-mb">
      <template slot="header" style="height: 66px">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">品种头寸明细</p>
      </template>
        <el-table
          border
          :data="first_tableData"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ background: '#eef1f6','text-align': 'center' }"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column prop="date" label="日期" sortable></el-table-column>
          <el-table-column prop="trade_type" label="类别"></el-table-column>
          <el-table-column prop="productName" label="品名"></el-table-column>
          <el-table-column prop="direction" label="方向"></el-table-column>
          <el-table-column prop="invoice_vol" label="总头寸"></el-table-column>
          <el-table-column prop="exp_vol" label="敞口数量"></el-table-column>
          <el-table-column
            prop="match_amount"
            label="已对冲数量" width="95"
          ></el-table-column>
          <el-table-column prop="diff" label="净敞口"></el-table-column>
          <el-table-column prop="expvalue" label="估值"></el-table-column>
          <el-table-column
            prop="matchvalue"
            label="净敞口估值" width="95"
          ></el-table-column>
        </el-table>
         <div class="block">
          <el-pagination
            @current-change="first_handleCurrentChange"
            :current-page="first_form.page"
            :page-size="first_form.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="first_form.pageTotal"
          >
          </el-pagination>
        </div>
        </el-card>
       
      </el-tab-pane>
      <el-tab-pane label="策略套保比例分析" name="second">
        <el-card shadow="never" class="d2-mb">
        <el-form
          ref="second_form"
          :inline="true"
          :model="second_form"
          label-width="80px"
        >
          <el-form-item label="策略ID:">
            <el-input
              placeholder="请输入内容"
              v-model="second_form.strategy_id"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="策略名称:">
            <el-input
              placeholder="请输入内容"
              clearable
              v-model="second_form.strategy_name"
            >
            </el-input>
          </el-form-item>
           <el-form-item label="策略类型:">
            <el-select v-model="second_form.strategy_type" clearable placeholder="请选择">
              <el-option label="现货期货套期" value="1"></el-option>
              <el-option label="现货期权套期" value="3"></el-option>
              <el-option label="现货场外期权套期" value="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品名:">
            <el-select v-model="second_form.name" clearable placeholder="请选择">
              <el-option
                v-for="item in options_pm_second"
                :key="item.commodity_id"
                :value="item.name"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
           <el-form-item>
            <el-button size="small" @click="select_second_fn()">查询</el-button>
          </el-form-item>
          <!-- <el-form-item label="策略名称:">
            <el-input
              placeholder="请输入内容"
              v-model="second_form.strategy_name"
            >
            </el-input>
          </el-form-item> -->
          <el-form-item label="日期:">
            <el-date-picker
              type="date"
              v-model="second_form.start_date"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            -
            <el-date-picker
              type="date"
              v-model="second_form.end_date"
              placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        </el-card>
        <div class="mb">
          <div style="padding-left:80px">
            <el-button size="small">导出</el-button>
            <el-button size="small">打印</el-button>
           </div>
           </div>
        <el-card shadow="never" class="d2-mb">
      <template slot="header" style="height: 66px">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">策略套保比例分析</p>
      </template>
        <el-table
          border
          :data="second_tableData"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ background: '#eef1f6','text-align': 'center' }"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column prop="date" label="日期" sortable></el-table-column>
          <el-table-column prop="strategy_id" label="策略ID"></el-table-column>
          <el-table-column
            prop="strategy_name"
            label="策略名称"
          ></el-table-column>
          <el-table-column prop="name" label="品名"></el-table-column>
          <el-table-column prop="volB" label="现货数量" sortable></el-table-column>
          <el-table-column prop="volS" label="期货/期权数量"></el-table-column>
          <el-table-column
            prop="standard_hr"
            label="标准套保比例"
          ></el-table-column>
          <el-table-column
            prop="actual_hr"
            label="实际套保比例"
          ></el-table-column>
        </el-table>
         <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="second_form.page"
            :page-size="second_form.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="second_form.pageTotal"
          >
          </el-pagination>
        </div>
        </el-card>
       
      </el-tab-pane>
    </el-tabs>
  </d2-container>
</template>
<script>
import { getReport_product_position, getReport_hedging_ratio } from "@/api/url";
export default {
  data() {
    return {
      activeName: "first",
      activeId:this.$route.query.ids,
      names:'品名:',
      //第一块
      first_form: {
        type: "data",
        trade_type: "现货",
        name: "",
        direction: -1,
        start_date:'',
        end_date:'',
        page: 1,
        pageSize: 20,
        pageTotal: 0
      },
      options_pm: [],
      options_fx: [
            { lable: "采购", value: 0 },
            { lable: "销售", value: 1 },
            { lable: "全部", value: -1 }
          ],
      first_tableData: [],
      //第二块
      second_form: {
        type: "data",
        name: "",
        strategy_name: "",
        start_date:'',
        end_date:'',
        strategy_id:'',
        strategy_type:'',
        page: 1,
        pageSize: 20,
        pageTotal: 0
      },
      options_pm_second: [],
      second_tableData: []
    };
  },
  created() {
    var datas = {
          type: "name_list",
          trade_type: this.first_form.trade_type
        };
        getReport_product_position(datas).then(res => {
          this.options_pm = res.result;
        });
    if(this.activeId==2){
      this.activeName='second'
      this.select_second_fn();
    }else{
      this.select_tableData();
    }
    getReport_hedging_ratio({ type: "name_list" }).then(res => {
      this.options_pm_second = res.result.results;
    });
    
  },
  methods: {
    //第一块
    changedatas() {
      if(this.first_form.trade_type!='现货'){
        this.names="合约:"
      }else{
        this.names='品名:'
      }
        var datas = {
          type: "name_list",
          trade_type: this.first_form.trade_type
        };
        getReport_product_position(datas).then(res => {
          this.options_pm = res.result;
        });
        if (this.first_form.trade_type == "现货") {
          this.options_fx = [
            { lable: "采购", value: 0 },
            { lable: "销售", value: 1 },
            { lable: "全部", value: -1 }
          ];
        } else {
          this.options_fx = [
            { lable: "买入", value: 0 },
            { lable: "卖出", value: 1 },
            { lable: "全部", value: -1 }
          ];
        }
      
    },
    select_tableData() {
      getReport_product_position(this.first_form).then(res => {
        this.first_tableData = res.result.results;
        this.first_form.pageTotal = res.result.count;
      });
    },
    select_tableData_fn() {
      this.first_form.page = 1;
      this.select_tableData();
    },
    first_handleCurrentChange(val) {
      this.first_form.page = val;
      this.select_tableData();
    },
    //第二块
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.select_tableData_fn();
      } else if (tab.name == "second") {
        this.select_second_fn();
      }
    },
    second_select_tableData() {
      var datas =JSON.parse(JSON.stringify(this.second_form));
      if(datas.strategy_id==''){
        datas.strategy_id=0
      }
      getReport_hedging_ratio(datas).then(res => {
        this.second_tableData = res.result.results;
        this.second_form.pageTotal = res.result.count;
      });
    },
    select_second_fn() {
      this.second_form.page = 1;
      this.second_select_tableData();
    },
    handleCurrentChange(val) {
      this.second_form.page = val;
      this.second_select_tableData();
    }
  }
};
</script>
<style scoped>
.el-pagination {
  text-align: center;
}
</style>